<template>
  <div>
    <house-list
      ref="houseList"
      :visible.sync="visibleList"
      :searchList.sync="searchList"
      :loadData="loadData"
      :houseParams="houseParams"
      :actions="houseActions"
      immediate
      title="查看房源信息"
    ></house-list>
    <house-detail :visible.sync="visibleDetail" :houseID="houseItem.ID"></house-detail>
    <houseItemForm :visible.sync="visibleForm" :houseID="houseItem.ID" :building="data" @success="listRefresh" />
  </div>
</template>
<script>
import { houseList, houseDetail } from '@/components'
import houseItemForm from './houseItemForm.vue'
import { getHouseCardList } from '@/api/followUpManagement'
export default {
  components: {
    houseDetail,
    houseItemForm,
    houseList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler (n) {
        this.visibleList = n
      }
    },
    visibleList (n) {
      if (!n) {
        this.close()
      }
    }
  },
  data () {
    return {
      visibleList: false,
      visibleForm: false,
      visibleDetail: false,
      houseItem: {},
      searchList: [
        {
          label: '搜索楼层',
          fields: 'Floor',
          type: 'input',
          props: {
            placeholder: '请输入楼层号'
          }
        },
        {
          label: '选择楼层',
          fields: 'scroll',
          type: 'select',
          props: {
            options: [],
            placeholder: '请选择楼层'
          },
          methods: {
            change: (e) => {
              document.getElementById(`floor-${e}`).scrollIntoView({
                behavior: 'smooth'
              })
              this.$message.success(`已找到${e > 0 ? '第' : '地下'} ${e} 层`)
            }
          }
        }
      ],
      loadData: (parameter, strContent) => {
        delete strContent.scroll
        this.searchList[1].props.options = []
        this.$nextTick(() => {
          if (this.$refs.houseList.$searchForm) {
            this.$refs.houseList.$searchForm.setFieldsValue({
              scroll: undefined
            })
          }
        })
        return getHouseCardList({
          ...parameter,
          strContent,
          ID: this.data.ID
        }).then((res) => {
          this.searchList[1].props.options = res.data.map((e) => {
            return {
              value: e.Floor,
              label: `${e.Floor > 0 ? '第' : '地下'} ${e.Floor} 层`
            }
          })
          return res
        })
      },
      houseParams: [
        {
          label: '房屋编号',
          custom: (house, floor) => {
            return `${floor}-${house.Number}`
          }
        },
        {
          label: '房屋结构',
          key: 'fwjg'
        },
        {
          label: '房屋面积',
          key: 'Area'
        },
        {
          label: '房屋状态',
          key: 'Mode'
        },
        {
          label: '现居住人',
          key: 'Name',
          custom: (house, floor) => {
            return house.Name || '暂无居住人'
          }
        }
      ],
      houseActions: [
        {
          tooltip: '修改',
          icon: 'edit',
          theme: 'filled',
          onClick: (e) => {
            this.houseItem = e
            this.visibleForm = true
          }
        },
        {
          tooltip: '查看',
          icon: 'eye',
          theme: 'filled',
          onClick: (e) => {
            this.houseItem = e
            this.visibleDetail = true
          }
        }
      ]
    }
  },
  methods: {
    // handleScrollFloor () {
    //   this.form.validateFields((err, values) => {
    //     if (!err) {
    //       const { floorIndex } = values
    //       const elment = document.getElementById(`floor-${floorIndex}`)
    //       elment.scrollIntoView(true)
    //       this.$message.success(`已找到${floorIndex > 0 ? '第' : '地下'} ${floorIndex} 层`)
    //     }
    //   })
    // },
    listRefresh () {
      this.$refs.houseList.fetchData()
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
  <style lang="less" scoped>
.ant-form {
  /deep/ .ant-select {
    width: 190px;
    display: inline-block;
  }
  .house-state-list {
    display: inline-block;
    position: relative;
    top: -0.09em;
    .house-color {
      width: 25px;
      height: 25px;
      border: 1px solid #eee;
      float: left;
      margin-right: 5px;
      border-radius: 5px;
      transition: all 0.3s;
      margin-right: 10px;
    }
  }
}
.floor-house {
  .floor-item {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 4px 0;
    border: 1px solid #d2d2d2;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  .house-list {
    .house-list-item {
      padding: 10px;
      border: 1px solid #d2d2d2;
      border-radius: 4px;
    }
  }
}
</style>
